<template>
  <div>
    <div>三维向量</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  // import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
  // import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(500, 500, 500);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    // console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    const geometry = new THREE.BoxGeometry(20, 20, 20);
    const material = new THREE.MeshBasicMaterial({
      color: 0xff12fa,
    });
    const color = new THREE.Color(0x00ff00);
    material.color = color;
    material.color.set('#a6020a');
    const materialMesh = new THREE.Mesh(geometry, material);
    scene.add(materialMesh);

    let aa = materialMesh.clone();
    console.log('aa', aa);

    let bb = new THREE.Mesh();

    bb.copy(materialMesh);
    bb.translateX(100);

    scene.add(bb);

    console.log('material.side', THREE.FrontSide, THREE.BackSide, THREE.DoubleSide);
    // 欧拉角
    const Euler = new THREE.Euler(Math.PI / 4, 0, Math.PI / 2);
    console.log('euler', Euler);

    const v3 = new THREE.Vector3(10, 22, 33);
    v3.x = 11;
    console.log('v3', v3.x, v3.y);
    //   const axis = new THREE.Vector3(1, 1, 1);
    //   axis.normalize(); //向量归一化
    //   //沿着axis轴表示方向平移100
    //   mesh.translateOnAxis(axis, 100);
    const axis = new THREE.Vector3(1, 1, 1); //向量axis
    console.log('axis', axis);

    function renderFun() {
      // console.log('asdfasdf');

      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
